import { Form, Input, Button, Select, DatePicker } from 'antd';
import React, { useState } from 'react'

import { apiAddData } from '../../api'

import { useNavigate } from 'react-router-dom'

const { Option } = Select;

const { RangePicker } = DatePicker;

const Home = () => {

    const navgiate = useNavigate()

    const [dateArr, setDateArr]: any = useState([])


    const onFinish = (values: any) => {

        apiAddData({ ...values, date: dateArr }).then(res => {
            // 添加成功以后 跳转到list页面
            navgiate('/layout/list')
        })
    }

    const changeDate = (dates: any, datesString: string[]) => {
        setDateArr(datesString)
    }


    return <div>
        <Form
            name="basic"
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 16 }}
            initialValues={{ remember: true }}
            onFinish={onFinish} // 校验成功 方法 方法默认值 用来搜集form表单中的参数
            autoComplete="off"
        >
            <Form.Item
                label="试卷名称"
                name="title"
                rules={[{ required: true, message: 'Please input your username!' }]}
            >
                <Input />
            </Form.Item>

            <Form.Item
                label="选择考试类型"
                name="examType"
                rules={[{ required: true, message: 'Please input your examType!' }]}
            >
                <Select
                    placeholder="请选择"
                    allowClear
                >
                    <Option value="理论">理论</Option>
                    <Option value="机试">机试</Option>
                </Select>

            </Form.Item>

            <Form.Item
                label="选择课程"
                name="className"
                rules={[{ required: true, message: 'Please input your className!' }]}
            >
                <Select
                    placeholder="请选择"
                    allowClear
                >
                    <Option value="node">node</Option>
                    <Option value="vue">vue</Option>
                    <Option value="react">react</Option>
                    <Option value="项目实战">项目实战</Option>
                    <Option value="高级ndoe">高级ndoe</Option>
                    <Option value="高级程序设计">高级程序设计</Option>

                </Select>
            </Form.Item>

            <Form.Item
                label="考试时间"
                name="date"
            >
                <RangePicker onChange={changeDate} renderExtraFooter={() => 'extra footer'} showTime />
            </Form.Item>


            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                <Button type="primary" htmlType="submit">
                    Submit
                </Button>
            </Form.Item>
        </Form>
    </div>
}

export default Home